/**
 * 页面加载动画插件
 * @module loading
 * @author xjc
 */

var extend = require('extend');

function Loading() {

    this.loadingDOM = null;
    /**
     * 保存容器原来的overflow属性
     * @type {String}
     */
    this.containerOverflow = '';

}

Loading.prototype.defaultOptions = {
    /**
     * 作为加载动画的元素
     * @type {String|Node}
     */
    element: '<img src="" alt="" />',
    // img: "default",
    // size: "auto",
    /**
     * 加载动画的容器
     * @type {String}
     */
    container: 'body',
    /**
     * 加载动画背景的颜色
     * @type {String}
     */
    maskColor: 'none'
};

/**
 * 初始化
 * @param  {Object} options 用户选项
 */
Loading.prototype.init = function(options) {
    extend(this, this.defaultOptions, options);
    this.render();
}

/**
 * 渲染组件
 */
Loading.prototype.render = function() {
    var self = this;

    // 装载元素
    self.loadingDOM = $('<div class="loading"><div class="middle"></div></div>');
    self.loadingDOM.find('.middle').append(self.element);
    var $container = $(self.container);
    $container.append(self.loadingDOM);


    // 添加样式
    var containerHeight = $(self.container).innerHeight();
    if(self.container === 'body') {
        containerHeight = '100%';
    }

    self.loadingDOM.css({
        'width': '100%',
        'height': containerHeight,
        'display': 'table',
        'position': 'absolute',
        'z-index': '999999999999999999',
        'left': '0',
        'top': '0',
        'background': self.maskColor,
        'text-align': 'center',

    })

    self.loadingDOM.find('.middle').css({
        'display': 'table-cell',
        'vertical-align': 'middle'
    })


    self.loadingDOM.css({
        display: 'none'
    })

    if ($container.css("position") === 'static') {
        $container.css("position", "relative")
    }

}

/**
 * 显示加载动画元素
 * @return {[type]} [description]
 */
Loading.prototype.show = function() {
    var self = this;

    var containerHeight = $(self.container).innerHeight();
    if(self.container === 'body') {
        containerHeight = '100%';
    }
    $(self.loadingDOM).css({
        display:'table',
        height:containerHeight
    });

    // 保存容器overflow状态
    self.containerOverflow = $(self.container).css('overflow');
    // 去除页面滚动条
    $(self.container).css({
        'overflow':'hidden'
    })
}

/**
 * 隐藏加载动画元素
 * @return {[type]} [description]
 */
Loading.prototype.hide = function() {
    var self = this;

    $(this.loadingDOM).hide();

    // 还原页面滚动条
    $(self.container).css({
        'overflow':self.containerOverflow
    })
}


/**
 * 导出插件
 * @param  {object} options 用户选项
 * @return {Loading}        插件的实例
 */
module.exports = function(options){
    var loading = new Loading();
    loading.init(options);
    return loading;
}

/* @support tradition plugname(loading) */
